<template>
  <div class="song_list u-f u-f-ac" @click="handleClickSong">
    <div class="img_box" v-if="!number">
      <van-image lazy-load radius="5" :src="song.picUrl" />
      <i class="iconfont icon-bofang"></i>
    </div>
    <div class="serial_number u-f u-f-ac u-f-jc" v-else>1</div>

    <div
      class="list_content u-f u-f-ah u-f1"
      :class="[border ? 'van-hairline--bottom' : '']"
    >
      <div class="content u-f1">
        <p class="title van-ellipsis">{{ song.name }}</p>
        <p class="author van-ellipsis">
          <!-- <span class="tag van-hairline--surround">VIP</span>
          <span class="tag van-hairline--surround">独家</span>
          <span class="tag van-hairline--surround">SQ</span> -->
          <span v-for="(item, i) in song.song.artists" :key="item.id">
            <span v-if="i === 0">{{ item.name }}</span>
            <span v-else>/{{ item.name }}</span>
          </span>
          -{{ song.song.album.name }}
        </p>
      </div>
      <div class="operate_box u-f">
        <p class="icon_box u-f u-f-ac" @click.stop="goSongRelatedVideo">
          <i class="iconfont icon-bofang3"></i>
        </p>
        <p class="icon_box u-f u-f-ac" v-if="showMenu">
          <i class="iconfont icon-liebiao-dian"></i>
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'SongList',
  props: {
    showPlay: {
      type: Boolean,
      default: false,
    },
    showMenu: {
      type: Boolean,
      default: true,
    },
    number: {
      type: Boolean,
      default: false,
    },
    border: {
      type: Boolean,
      default: false,
    },
    song: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  setup(props, context) {
    const router = useRouter()
    const handleClickSong = () => {
      context.emit('change', props.song)
    }

    const goSongRelatedVideo = () => {
      router.push('/song-related-video')
    }

    return {
      handleClickSong,
      goSongRelatedVideo,
    }
  },
})
</script>

<style lang="less" scoped>
.song_list {
  .img_box {
    position: relative;
    width: 40px;
    height: 40px;
    margin-right: 8px;
    .van-image {
      width: 100%;
      height: 100%;
    }
    .icon-bofang {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 16px;
      color: var(--sky-text-white-color);
    }
  }
  .serial_number {
    width: 40px;
    height: 40px;
    margin-right: 8px;
    font-size: 16px;
    color: var(--sky-text-gray6-color);
  }

  .list_content {
    padding: 10px 0;
    .content {
      width: 0;
      .title {
        font-size: 16px;
        color: var(--sky-text-black-color);
      }
      .author {
        font-size: 14px;
        color: var(--sky-text-gray6-color);
        .tag {
          display: inline-block;
          font-size: 10px;
          line-height: 15px;
          color: var(--sky-text-red-color);
          padding: 0 4px;
          margin-right: 3px;
        }
      }
    }
    .operate_box {
      .icon_box {
        width: 35px;
        height: 100%;
        padding-left: 5px;
        box-sizing: border-box;
        .iconfont {
          font-size: 20px;
          color: var(--sky-text-gray6-color);
        }
      }
    }
  }
}
.van-hairline--surround::after {
  border-radius: 10px;
}
</style>